{% block sw_product_media_form %}
<div
    class="sw-product-media-form"
    :class="{ 'is--disabled': disabled }"
>
    {% block sw_product_media_form_upload %}
    <sw-upload-listener
        v-if="!isLoading"
        :upload-tag="product.id"
        auto-upload
        @media-upload-finish="successfulUpload"
        @media-upload-fail="onUploadFailed"
    />

    <sw-media-upload-v2
        v-if="!isLoading && acl.can('product.editor')"
        variant="regular"
        :upload-tag="product.id"
        :default-folder="product.getEntityName()"
        :file-accept="fileAccept"
        @media-upload-sidebar-open="onOpenMedia"
    />
    {% endblock %}

    {% block sw_product_media_form_grid %}
    <div class="sw-product-media-form__previews">
        <div class="sw-product-media-form__cover-container sw-product-media-form__column">
            {% block sw_product_media_form_cover_preview %}
            <div
                v-if="product.cover || cover"
                class="sw-product-media-form__preview-cover"
            >
                <div class="preview-cover">
                    {% block sw_product_media_form_cover_image %}
                    <sw-media-preview-v2
                        :key="cover ? cover.media?.url : product.cover.media?.url"
                        class="sw-product-media-form__cover-image"
                        :source="cover ? cover.mediaId : product.cover.mediaId"
                    />
                    {% endblock %}
                    <span>{{ $tc('sw-product.mediaForm.coverSubline') }}</span>
                </div>
            </div>
            <div
                v-else
                class="sw-product-media-form__cover-image is--placeholder"
            >
                {{ $tc('sw-product.mediaForm.coverSubline') }}
            </div>
            {% endblock %}
        </div>

        <div
            v-if="!isLoading"
            class="sw-product-media-form__grid sw-product-media-form__column"
            :style="gridAutoRows"
        >
            {% block sw_product_media_form_grid_items %}
            <sw-product-image
                v-for="mediaItem in mediaItems"
                :key="mediaItem.id"
                v-draggable="{ dragGroup: 'product-media', data: mediaItem, onDragEnter: onMediaItemDragSort }"
                v-droppable="{ dragGroup: 'product-media', data: mediaItem }"
                :is-cover="isCover(mediaItem)"
                :is-spatial="isSpatial(mediaItem)"
                :is-ar-ready="isArReady(mediaItem)"
                :is-placeholder="mediaItem.isPlaceholder"
                :media-id="mediaItem.mediaId"
                :show-cover-label="showCoverLabel"
                @sw-product-image-delete="removeFile(mediaItem)"
                @sw-product-image-cover="markMediaAsCover(mediaItem)"
            />
            {% endblock %}
        </div>
        <sw-loader v-else />
    </div>
    {% endblock %}
</div>
{% endblock %}
